@import 'tailwindcss';

.router-link-exact-active {
  @apply text-green-500;
}

.btn {
  @apply px-6 py-3 rounded-lg font-medium transition-all duration-200
    ease-in-out shadow-md hover:shadow-lg transform hover:-translate-y-0.5
    active:translate-y-0 active:shadow-md focus:outline-none focus:ring-2
    focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
    disabled:transform-none disabled:hover:shadow-md;
}

.btn-base {
  @apply bg-gray-600 hover:bg-gray-700 active:bg-gray-800
    focus:ring-gray-500 text-gray-100;
}
.btn-blue {
  @apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800
    focus:ring-blue-500 text-gray-100;
}

.btn-red {
  @apply bg-red-600 hover:bg-red-700 active:bg-red-800 focus:ring-red-500
    text-gray-100;
}

.btn-green {
  @apply bg-green-600 hover:bg-green-700 active:bg-green-800
    focus:ring-green-500 text-gray-100;
}

.btn-purple {
  @apply bg-purple-600 hover:bg-purple-700 active:bg-purple-800
    focus:ring-purple-500 text-gray-100;
}

.btn-yellow {
  @apply bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600
    focus:ring-yellow-500 text-gray-700;
}

.btn-lg {
  @apply px-8 py-4 text-lg;
}

.btn-sm {
  @apply px-4 py-2 text-sm;
}

.input {
  @apply px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
}
input.line {
  @apply rounded-none border-0 border-b-2 border-blue-300 focus:outline-none focus:border-blue-400 bg-transparent;
}
.input.sm {
  @apply px-2 py-1 text-sm;
}

.pd12 {
  @apply py-1 px-2;
}
